import WS from '@/libs/ws.js'
import { reactive } from 'vue'
import axios from 'axios'
import { extractUrls } from '../../utils/util'

export const scrollContainer = ref(null)
export const messageObj = {}

export const state = reactive({
  messages: [],
  messageId: null,
  messageIndex: 0,
  dialog: {
    input: { show: false },
  },
})

class Chat {
  constructor() {
    this.init()
  }

  init() {
    const ws = new WS({
      url: localStorage.ws || 'ws://10.240.19.38:8765',
      onMessage: value => {
        onMessage(value)
      },
    })

    this.ws = ws
  }

  send(data) {
    this.ws.send(data)
  }

  input(data) {
    state.messages.push({
      role: 'user',
      type: 'text',
      content: data,
    })

    this.send('input: ' + data)
    scrollToBottom()
  }

  inputParamter(data) {
    state.messages.push({
      role: 'user',
      type: 'text',
      content: data,
    })

    this.send('input_paramter: ' + data)
    scrollToBottom()
  }
}

export const chat = new Chat()

function onMessage(item) {
  item = JSON.parse(item)

  const { run_id, parent_run_id, code } = item

  if (code == 1) {
    state.dialog.input.show = true
    state.dialog.input.data = item
    return
  }

  const result = {
    level: 0,
    status: 0,
    childrens: [],
    expand: true,
    role: 'system',
    input: null,
    output: [],
    ...item,
  }

  // if (run_id) {
  //   if (!messageObj[run_id]) messageObj[run_id] = result
  //   state.messageId = run_id

  //   // 完成
  //   if (type.indexOf('_end') != -1) {
  //     messageObj[run_id].output = item
  //     messageObj[run_id].status = 1
  //   } else {
  //     messageObj[run_id].type = type
  //     messageObj[run_id].input = item
  //   }
  // }

  // if (parent_run_id != 'None' && parent_run_id) {
  //   const parent = messageObj[parent_run_id]
  //   if (parent) {
  //     result.level = parent.level + 1
  //     parent.childrens.push(result)
  //   } else {
  //     state.messages.push(result)
  //   }
  // } else {
  //   state.messages.push(result)
  // }

  state.messages.push(result)

  state.messageIndex++

  if (result.code == 0) {
    const urls = extractUrls(result.content)
    if (urls.length > 0) {
      urls.forEach(url => {
        onMessage(
          JSON.stringify({
            code: 999,
            content: url,
          }),
        )
      })
    }
  }

  scrollToBottom()
}

function scrollToBottom() {
  if (scrollContainer.value) {
    setTimeout(() => {
      scrollContainer.value.scrollTo({
        top: scrollContainer.value.scrollHeight,
        behavior: 'smooth',
      })
    })
  }
}

// axios({
//   url: 'http://127.0.0.1:1200/api/message',
// }).then(res => {
//   res.data.data.forEach((item, index) => {
//     setTimeout(() => {
//       onMessage(item)
//     }, index * 1)
//   })
// })

// const messages = [
//   // {
//   //   run_id: '37b16d12-59c9-4a52-8628-4a2810096bc0',
//   //   parent_run_id: '0750a9cc-3efc-4c22-8676-07cb42fb8c82',
//   //   content:
//   //     '使用generate_line_chart工具，参数docid和request为"根据镜像使用频率生成折线图"，返回折线图配置ID列表（line_ids）。',
//   //   code: 0,
//   // },
//   {
//     run_id: '6e981a4a-3668-4f90-9c4c-0bcafbbbf0c2',
//     parent_run_id: null,
//     content:
//       '我会创建一个分步骤的执行计划，依次完成以下任务：1.查阅API文档定位获取容器列表的接口模板并记录请求方法及参数规范；2.验证接口必需参数是否包含cluster_id、filter条件及认证参数（如API_KEY/TOKEN）；3.设计参数接收模块以动态获取用户输入的集群ID、JSON格式过滤条件及基础认证/Token凭证；4.根据接口规范将认证参数置于Headers，集群ID作为Path Parameter，过滤条件编码为Query Parameters或Request Body；5.使用HTTP客户端发起带参数的GET/POST请求并添加重试机制；6.通过JSON解析库提取响应中containers数组下的id、status、resource_usage字段，按容器实例聚合数据生成结构化列表；7.执行完毕返回整理后的容器信息汇总表。',
//     code: 0,
//     role: 'system',
//   },
//   // md
//   {
//     code: 2,
//     content: `* [ ] 根据bb81e0a1-042f-4358-a194-aa870277f6d7，统计出饼图和折线图，因为数据不足生成图失败可以忽略，最后生成面板，部署到服务器。\n\n    * [x] 根据提供的文档ID 'bb81e0a1-042f-4358-a194-aa870277f6d7' 生成饼图配置，忽略数据不足的情况。\n    * [x] 基于相同的文档ID 'bb81e0a1-042f-4358-a194-aa870277f6d7' 创建折线图配置，并且也忽略数据不足的问题。\n    * [ ] 利用生成的饼图和折线图配置ID，构建面板，将所有图表整合到一个面板中展示。\n    * [ ] 部署生成的面板至服务器，并获取URL地址以便访问。\n\n`,
//     role: 'system',
//   },
//   // URL
//   // {
//   //   code: 4,
//   //   content: `https://www.ithome.com/`,
//   //   role: 'system',
//   // },

//   {
//     code: 0,
//     content: `文本里面包含URL https://www.ithome.com/`,
//     role: 'system',
//   },
// ]

// console.log('messages', messages)

// for (let i = 0; i < messages.length; i++) {
//   onMessage(JSON.stringify(messages[i]))
// }
